<template>
    <el-dialog
        title="角色分配"
        :visible.sync="show"
        :before-close="handleCancel"
        :close-on-click-modal="false"
        width="600px"
    >
        <div v-loading="loadingGet" v-if="reset">
            <el-input
                style="margin-bottom:10px;"
                v-model="filterRoleName"
                placeholder="筛选"
                clearable
                ref="searchInput"
            ></el-input>
            <el-checkbox-group v-model="checkList" style="max-height:400px;overflow-y:auto;">
                <el-checkbox
                    v-show="!filterRoleName || filterRoleName=='' || item.roleName.indexOf(filterRoleName) >= 0 || item.roleCode.indexOf(filterRoleName) >= 0"
                    v-for="(item, index) in roleList"
                    :key="index"
                    :label="item.roleId"
                    :disabled="!item.enabled"
                >
                    {{item.roleName}}
                    <el-tag
                        style="margin-left:5px;margin-top:15px;"
                        size="small"
                        type="info"
                        effect="plain"
                    >{{item.roleCode}}</el-tag>
                </el-checkbox>
            </el-checkbox-group>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancel" size="small">取消</el-button>
            <el-button type="primary" @click="handleSubmit" size="small" :loading="loadingSubmit">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import dept_api from '../../api/dept_api'
import user_api from '../../api/user_api'
export default {
    props: {
        id: Number,
        show: Boolean,
        success: Function,
        cancel: Function,
    },
    components: {
    },
    watch: {
        show(val) {
            if (val) {
                this.reset = false
                this.$nextTick(() => {
                    Object.assign(this.$data, this.$options.data.call(this))
                    this.reset = true
                    this.init && this.init()
                })
            }
        },
        filterRoleName(val) {
            if (val && val != '') {

            }
        }
    },
    data() {
        return {
            reset: true,
            roleList: [],
            checkList: [],
            loadingSubmit: false,
            loadingGet: false,
            filterRoleName: '',
        }
    },
    methods: {
        init() {
            this.loadingGet = true
            user_api.roleList(this.id).then(data => {
                this.loadingGet = false
                this.roleList = data
                this.checkList = data.filter(e => e.auth).map(e => e.roleId)
            }).catch(err => {
                this.loadingGet = false
                this.$message.error(err.message)
            })
            this.$nextTick(() => {
                this.$refs.searchInput.focus()
            })
        },
        handleSubmit(callback) {
            this.loadingSubmit = true
            user_api.updateUserRole(this.id, this.checkList).then(data => {
                this.loadingSubmit = false
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                })
                this.success()
            }).catch(err => {
                this.loadingSubmit = false
                this.$message.error(err.message)
            })
        },
        handleCancel() {
            this.cancel()
        },
        handleClose(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },
        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },

        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.dynamicTags.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
        }
    }
}
</script>

<style scoped>
.el-tag + .el-tag {
    margin-left: 10px;
}
.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}
.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}
</style>